<template>
	<view>
		<uNavbar title="多彩活动"></uNavbar>
		<view class="zone flex_Z" v-for="(item,index) in zoneList" :key="item.id" @click="goGuessingDetail(item.id)">
			<view class="zone_box">
				<image :src="item.cover" mode="aspectFill"></image>
				<text class="hall_state" v-if="item.status == 0">未开始 {{item.start_time}}</text>
				<text class="hall_state" v-if="item.status == 1">进行中</text>
				<text class="hall_state" v-if="item.status == 2">待开奖</text>
				<text class="hall_state" v-if="item.status == 3">已结束</text>
			</view>
			<text class="zone_text">{{item.name}}</text>
		</view>
		
		<!-- 暂无数据 / 加载更多 -->
		<noDatas :xxxList="zoneList" :status="status"></noDatas>
	</view>
</template>

<script>
	import {guessList} from '../../api/guessing.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				status: 'loadmore', //加载前值为loadmore，加载中为loading，没有数据为nomore
				zoneList: []
			}
		},
		onLoad() {
			this.initList()
		},
		methods: {
			// 初始化品牌孵化列表
			initList() {
				let data = {
					page: this.page,
				};
				guessList(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						let list = res.data.data;
						this.zoneList = this.page == 1 ? list : this.zoneList.concat(list);
						console.log(this.zoneList);
						if (list.length < this.size) this.status = 'nomore';
						else this.status = 'loading';
					}
				})
			},
			goGuessingDetail(id){
				uni.navigateTo({
					url:'/pagesMy/activityCenter/guessingIndex?id=' + id
				})
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			let that = this;
			setTimeout(function() {
				that.page = 1
				that.zoneList = []
				that.initList()
			}, 800);
		},
		//触底加载
		onReachBottom() {
			console.log('触底加载');
			if (this.status != 'nomore') {
				this.page = this.page + 1
				this.initList()
			}
		}
	}
</script>

<style scoped>
	.zone {
		width: 690rpx;
		height: 400rpx;
		margin: 40rpx auto;
		background: #ffffff;
		border-radius: 20rpx;
	}

	.zone_box {
		position: relative;
		width: 100%;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.zone_box>image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	.hall_state {
		position: absolute;
		top: 0;
		left: 0;
		font-size: 24rpx;
		color: #ffffff;
		padding: 12rpx 28rpx;
		background: #00000080;
		border-radius: 0 0 10rpx 0;
		/* background: rgba(255, 255, 255 0.1); */
		border-top-left-radius: 20rpx;
	}

	.zone_text {
		padding: 20rpx 24rpx 0;
		font-size: 36rpx;
		color: #333333;

	}
</style>